import React, { Component } from "react";
import "../../assets/css/OwenersList.scss";
import { Pagination } from "antd";
import { getCarOwnersList, getCarOwnerId } from "../../apis/usersApi";

export default class OwnersList extends Component {
  state = {
    choice: false,
    role: 1,
    owners: [],
    userDetails: [],
    searchArr: ["姓名", "身份证", "电话号码", "居住地址"],
    sear: "姓名",
    inputVal: "",
    // pageSize:3,//每页条数
    // currentPage:1,//当前页
    // totalPages:1,//总页数
    // total:1,//总条数
  };
  componentDidMount() {
    this.getOwners(); //获得所有车主
  }
  //获得所有车主
  getOwners = async () => {
    try {
      let { role, owners } = this.state;
      const data = await getCarOwnersList({ role });
      owners = data;
      this.setState({ owners });
    } catch (error) {
      console.log(error);
    }
  };
  //搜索
  searchOwners = async () => {
    try {
      let { sear, inputVal, role, owners } = this.state;
      inputVal = this.inputData.value;
      switch (sear) {
        case "姓名":
          sear = "name";
          break;
        case "身份证":
          sear = "idCard";
          break;
        case "电话号码":
          sear = "phone";
          break;
        case "居住地址":
          sear = "address";
          break;
      }
      const data = await getCarOwnersList({ role, inputVal, sear });
      owners = data;
      this.setState({ owners });
    } catch (error) {
      console.log(error);
    }
  };
  //显示模态框
  appear = async (_id) => {
    try {
      let { choice, userDetails } = this.state;
      choice = true;
      this.setState({ choice });
      const data = await getCarOwnerId({ _id });
      userDetails = data;
      this.setState({
        userDetails,
      });
    } catch (error) {
      console.log(error);
    }
  };
  //点击关闭模态框
  close = () => {
    let { choice } = this.state;
    choice = false;
    this.setState({ choice });
  };
  agree = () => {
    this.close();
  };
  //获取下拉框的vul值
  getVul = (e) => {
    this.setState({
      sear: e.target.value,
    });
  };
  render() {
    let { choice, owners, userDetails, searchArr, sear } = this.state;
    return (
      <div style={{ whdth: "100%", height: "100%" }}>
        <div className="box">
          <div className="searchBox">
            <select name="" id="" value={sear} onChange={(e) => this.getVul(e)}>
              {searchArr.map((item, index) => {
                return <option key={index}>{item}</option>;
              })}
            </select>
            <input type="text" ref={(vul) => (this.inputData = vul)} />
            <button onClick={this.searchOwners}>搜索</button>
          </div>
          <div className="fatherBox">
            <div className="bigBox">
              <div>Id</div>
              <div>真实姓名</div>
              <div>身份证号</div>
              <div>电话号码</div>
              <div>居住地址</div>
              <div>好评数</div>
              <div>差评数</div>
              <div>操作</div>
            </div>
            {owners.map((itme, index) => {
              return (
                <div className="itmeBox" key={itme._id}>
                  <div>{itme._id}</div>
                  <div>{itme.name}</div>
                  <div>{itme.idCard}</div>
                  <div>{itme.phone}</div>
                  <div>{itme.address}</div>
                  <div>{itme.praiseCount}</div>
                  <div>{itme.badCount}</div>
                  <div className="but">
                    <a onClick={() => this.appear(itme._id)}>详情</a>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="paging">
            <Pagination
              // current={2} //当前页数
              defaultCurrent={1} //默认当前页
              defaultPageSize={3} //默认每页条数
              total={100} //数据总数
              // pageSize={1} //每页条数
              pageSizeOptions={[3, 5, 8]} //指定每页可以显示多少条
              responsive={true} //自适应屏幕宽度
              // onChange={() => this.onChangSize()}
            />
          </div>

          <div className={choice ? "showBox" : "closeBox"}>
            <div className="minBox">
              <div className="show">
                <a onClick={this.close}>X</a>
              </div>
              <div className="flexBox">
                <div className="childBox">
                  <span className="left">Id:</span>
                  <span className="right">{userDetails._id}</span>
                </div>
                <div className="childBox">
                  <span className="left">真实姓名:</span>
                  <span className="right">{userDetails.name}</span>
                </div>
                <div className="childBox">
                  <span className="left">身份证号:</span>
                  <span className="right">{userDetails.idCard}</span>
                </div>
                <div className="childBox">
                  <span className="left">电话号码:</span>
                  <span className="right">{userDetails.phone}</span>
                </div>
                <div className="childBox">
                  <span className="left">居住地址:</span>
                  <span className="right">{userDetails.address}</span>
                </div>
                <div className="childBox">
                  <span className="left">好评数:</span>
                  <span className="right">{userDetails.praiseCount}</span>
                </div>
                <div className="childBox">
                  <span className="left">差评数:</span>
                  <span className="right">{userDetails.badCount}</span>
                </div>
                <div className="childBox">
                  <a onClick={this.agree} className="agree">
                    确定
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
